import { defineComponent } from 'vue';
import { scoreDetail } from '@/api/home';
import '../../../style/index.less';
import { ElDialog, ElTable, ElTableColumn } from 'element-plus';
export default defineComponent({
  name: 'ItemTable',
  props: ['params', 'title', 'id'],
  setup(props: any, { emit, slots, expose }) {
    const dialogVisible = ref(false);
    const data = ref({}) as AnyObject;

    const rowMerge = ({ row, column, rowIndex, columnIndex }: AnyObject) => {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = data.value.list[rowIndex - 1] as any;
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < data.value.list.length; i++) {
            const nextRow = data.value.list[i] as any;
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan, colspan: 1 };
        }
      }
    };
    const getScoreDetail = () => {   
      console.log(props.id);
         
      if (props.id || props.id===0) {
        scoreDetail(props.id).then((res) => {
          data.value = res.data;
        });
      } else {
        const timer = setInterval(() => {
          if (props.id || props.id===0) {
            clearInterval(timer);
            scoreDetail(props.id).then((res) => {
              data.value = res.data;
            });
          }
        }, 200);
      }
    };
    watch(
      () => dialogVisible.value,
      (val: boolean) => val && getScoreDetail()
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        title={props.title}
        style={{ maxWidth: '800px', with: 'auto' }}
      >
        <ElTable
          class="border_table"
          border
          span-method={rowMerge}
          header-row-class-name="table_header"
          size="small"
          data={data.value.list}
          v-slots={{
            append: () => (
              <div class="custom_foot_table">
                <p class="flex-between">
                  <span>评分合计</span>
                  <span class="co-7">{data.value.sum?.total}</span>
                </p>
                <p class="flex-between">
                  <span>绩效</span>
                  <span class="co-7">{data.value.sum?.performance}</span>
                </p>
              </div>
            )
          }}
        >
          <ElTableColumn prop="name" label="大类" />
          <ElTableColumn prop="project_name" label="考核项" />
          <ElTableColumn prop="score" label="占比" />
          <ElTableColumn prop="total_score" label="得分" />
        </ElTable>
      </ElDialog>
    );
  }
});
